<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts"
export default {
  mounted() {
    // 1.初始化
    let myChart = echarts.init(this.$refs.myChart)
    // 2.设置echarts数据
    //  let data=[
    //       { value: 67, name: '美食' },
    //       { value: 85, name: '日化' },
    //       { value: 45, name: '数码' },
    //       { value: 98, name: '家电' }
    //     ]
    let data = [
      {
        value: 67,
        name: '美食',
        itemStyle: {
          normal: {
            color: 'rgb(1,175,80)'
          }
        }
      },
      {
        value: 85,
        name: '日化',
        itemStyle: {
          normal: {
            color: 'rgb(255,175,80)'
          }
        }

      },
      {
        value: 45,
        name: '数码',
        itemStyle: {
          normal: {
            color: 'rgb(1,0,80)'
          }
        }
      },
      {
        value: 98,
        name: '家电',
        itemStyle: {
          normal: {
            color: 'rgb(30,50,70)'
          }
        }
      }
    ]
    // 单独设置每个颜色

    // 3.设置配置项
    let option = {
      title: {
        text: '饼状图',
        subtext: '基本设置',
        left: 'center'//设置位置居中
      },
      tooltip: {
        trigger: 'item'//触发类型item数据项图形触发
      },
      legend: {
        orient: 'vertical',//图例列表的布局朝向vertical纵向
        left: 'left'
      },
      series: [
        {
          name: '销售量',
          type: 'pie',
          // 设置环形图
          radius: ['40%', '70%'],//饼图的半径。数组的第一项是内半径，第二项是外半径。
          // 设置环形图
          label: {//饼图图形上的文本标签
            show: true,
            position: "outside",//outside饼图扇区外侧inside饼图扇区内部center在饼图中心位置
            color: "yellow"
          },
          labelLine: {//标签的视觉引导线配置
            show: true
          },
          roseType: 'area',//是否展示成南丁格尔图，通过半径区分数据大小
          itemStyle: {//设置内容样式
            color: '#c23531',
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          data
        }
      ]
    }
    // 4.设置图表绘制图表
    myChart.setOption(option)
  }
}
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid red;
}
</style>